<template>
    <div class="page staff_home">
        <nav-bar title="店员管理" class="gshadow" @click-left="$router.back()"></nav-bar>
        <div class="con">
            <list v-model="loading" v-if="listData.length>0" :finished="finished" @load="prepareData">
                <van-cell-group :title="title">
                    <van-cell v-for="(data,index) in listData" :key="index" center :title="data.name" :label="data.mobilePhone">
                        <!-- <template #right-icon>
                            <van-icon name="delete" size="20px" color="#CD5C5C" @click="delStaffAction(data)" />
                        </template> -->
                    </van-cell>
                </van-cell-group>
            </list>
            <empty v-else description="暂无数据～" />

            <div class="fix_bottom">
                <van-button type="info" size="large" @click="addStaffAction">添加店员</van-button>
            </div>
        </div>
    </div>
</template>

<script>

import { List, Dialog, Empty } from 'vant';
import { mapState } from 'vuex';

export default {

    name: "staffHome",

    components: { List, Empty },

    data() {
        return {
            listData: [],
            loading: false,
            finished: false,
        }
    },

    mounted() {
        this.prepareData();
    },

    methods: {
        // 删除事件
        delStaffAction(data) {
            Dialog.alert({
                message: `确定要删除${data.name}吗？`,
            }).then(() => {
                // on close
            });
        },

        // 新增店员
        addStaffAction() {
            this.$router.push("/staffAdd");
        },

        // 加载页面数据
        prepareData() {
            this.$http.staffList().then(respData => {
                this.loading = false;
                this.finished = true;
                if (respData === false) {
                    return false
                }
                this.listData = respData || [];
            });
        },
    },

    computed: {
        ...mapState({
            userRole: state => state.userRole,
        }),

        title() {
            return `已添加${this.listData.length}位店员`
        },
    },

};
</script>

<style lang="scss" scoped>
.staff_home {
    width: 100%;
    .con {
        padding: 10px;
    }

    .custom-image .van-empty__image {
        width: 50px;
        height: 30px;
    }

    .fix_bottom {
        width: 100%;
        padding: 10px;
        position: fixed;
        bottom: 0;
        left: 0;
    }
}
</style>
